<template>
	<div class="user">
		<el-row>
			<el-col>
				<el-button
					icon="el-icon-plus"
					type="danger"
					size="mini"
					@click=";(user.title = '新增用户'), (user.open = true)"
					>新增</el-button
				>
			</el-col>
		</el-row>
		<el-table :data="list" style="width: 100%" v-loading="loading">
			<el-table-column
				prop="loginname"
				label="用户名"
				align="center"
				fixed="left"
			>
			</el-table-column>
			<el-table-column prop="username" label="姓名" align="center">
			</el-table-column>
			<el-table-column
				prop="telnum"
				label="手机号"
				align="center"
				width="110"
			>
			</el-table-column>
			<el-table-column
				prop="code"
				label="身份证号"
				align="center"
				width="160"
			>
			</el-table-column>
			<el-table-column prop="sex" label="性别" align="center" width="50">
			</el-table-column>
			<el-table-column prop="nation" label="民族" align="center">
			</el-table-column>
			<el-table-column prop="hometown" label="籍贯" align="center">
			</el-table-column>
			<el-table-column
				prop="birth"
				label="出生日期"
				align="center"
				width="100"
			>
			</el-table-column>
			<el-table-column
				prop="education"
				label="学历"
				align="center"
				width="60"
			>
			</el-table-column>
			<el-table-column
				prop="address"
				label="家庭住址"
				align="center"
				width="200"
			>
			</el-table-column>
			<el-table-column prop="position" label="工作岗位" align="center">
			</el-table-column>
			<el-table-column
				prop="retire"
				label="是否退休"
				align="center"
				width="75"
			>
				<template slot-scope="{ row }">
					<div class="">
						{{
							row.retire == 1 ? '是' : row.retire == 0 ? '否' : ''
						}}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center" width="70">
				<template slot-scope="{ row }">
					<div
						class=""
						style="
							display: flex;
							align-items: center;
							justify-content: center;
						"
					>
						<span
							style="width: 6px; height: 6px; border-radius: 50%"
							:style="{
								'background-color':
									row.status == 1
										? '#52c41a'
										: row.status == 2
										? 'rgba(250, 212, 0, 1)'
										: '#FF4D4F',
							}"
						></span>
						<div
							class=""
							style="
								margin-left: 8px;
								font-size: 14px;
								color: rgba(0, 0, 0, 0.65);
							"
						>
							{{
								row.status == 1
									? '正常'
									: row.status == 2
									? '锁定'
									: '关闭'
							}}
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="照片" align="center" width="120">
				<template slot-scope="{ row }">
					<el-image
						style="width: 100px; height: 100px"
						:src="row.imageUrl"
						fit="cover"
					></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="sysuserid" label="系统用户ID" align="center">
			</el-table-column>
			<!-- <el-table-column prop="password" label="密码" align="center">
      </el-table-column> -->
			<el-table-column prop="deptid" label="归属部门" align="center">
			</el-table-column>
			<el-table-column
				label="操作"
				align="center"
				width="80"
				fixed="right"
			>
				<template slot-scope="{ row }">
					<div
						class=""
						style="
							display: flex;
							align-items: center;
							justify-content: center;
						"
					>
						<el-button type="text" @click="handleItem(1, row)"
							>编辑</el-button
						>
						<el-button type="text" @click="handleItem(2, row)"
							>删除</el-button
						>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination
			v-show="ruleForm.total > 0"
			:total="ruleForm.total"
			:page.sync="ruleForm.pageNum"
			:limit.sync="ruleForm.pageSize"
			@pagination="() => {}"
		/>
		<el-dialog
			:title="user.title"
			:visible.sync="user.open"
			width="680px"
			append-to-body
			@close=";(user.open = false), cancelForm('form')"
		>
			<el-form
				:model="form"
				:rules="rules"
				ref="form"
				label-width="90px"
				class="form"
				inline
			>
				<el-form-item label="用户名" prop="loginname">
					<el-input
						v-model="form.loginname"
						placeholder="请输入用户名"
					></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="username">
					<el-input
						v-model="form.username"
						placeholder="请输入姓名"
					></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="telnum">
					<el-input
						v-model="form.telnum"
						placeholder="请输入手机号"
						maxlength="11"
					></el-input>
				</el-form-item>
				<el-form-item label="身份证号" prop="code">
					<el-input
						v-model="form.code"
						placeholder="请输入身份证号"
						maxlength="18"
					></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select
						v-model="form.sex"
						placeholder="请选择性别"
						clearable
					>
						<el-option label="男" value="男"></el-option>
						<el-option label="女" value="女"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="民族" prop="nation">
					<el-select
						v-model="form.nation"
						clearable
						placeholder="请选择民族"
					>
						<el-option
							v-for="item in nationList"
							:key="item.id"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="籍贯" prop="hometown">
					<el-cascader
						size="large"
						clearable
						placeholder="请选择籍贯"
						@change="changeArea"
						:options="pcaTextArr"
						v-model="selectedOptions"
					>
					</el-cascader>
				</el-form-item>
				<el-form-item label="出生日期" prop="birth">
					<el-date-picker
						v-model="form.birth"
						type="date"
						placeholder="请选择出生日期"
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="学历" prop="education">
					<el-input
						v-model="form.education"
						placeholder="请输入学历"
					></el-input>
				</el-form-item>
				<el-form-item label="家庭住址" prop="address">
					<el-input
						v-model="form.address"
						placeholder="请输入家庭住址"
					></el-input>
				</el-form-item>
				<el-form-item label="工作岗位" prop="position">
					<el-input
						v-model="form.position"
						placeholder="请输入工作岗位"
					></el-input>
				</el-form-item>
				<el-form-item label="是否退休" prop="retire">
					<el-select
						v-model="form.retire"
						clearable
						placeholder="请选择是否退休"
					>
						<el-option label="是" :value="1"></el-option>
						<el-option label="否" :value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-select v-model="form.status" placeholder="请选择状态">
						<el-option label="正常" :value="1"></el-option>
						<el-option label="锁定" :value="2"></el-option>
						<el-option label="关闭" :value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="照片" prop="picture">
					<el-upload
						class="avatar-uploader"
						action
						:show-file-list="false"
						:auto-upload="false"
						:on-change="handleChange"
						accept=".jpg,.png"
					>
						<img
							v-if="form.imageUrl"
							:src="form.imageUrl"
							class="avatar"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<!-- <el-form-item label="系统用户ID" prop="sysuserid">
          <el-input
            v-model="form.sysuserid"
            placeholder="请输入系统用户ID"
          ></el-input>
        </el-form-item> -->
				<el-form-item label="密码" prop="password">
					<el-input
						v-model="form.password"
						show-password
						placeholder="请输入密码"
					></el-input>
				</el-form-item>
				<el-form-item label="归属部门" prop="deptid">
					<treeselect
						v-model="form.deptid"
						:options="deptOptions"
						:show-count="true"
						placeholder="请选择归属部门"
					/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button
					:disabled="btnLoading"
					type="primary"
					@click="submitForm('form')"
					>确 定</el-button
				>
				<el-button @click=";(user.open = false), cancelForm('form')"
					>取 消</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import {
	listUser,
	addUser,
	uploaduserpic,
	deleteUser,
	editUser,
} from '@/api/system/users'
import { deptTreeSelect } from '@/api/system/user'
import {
	provinceAndCityData,
	pcTextArr,
	regionData,
	pcaTextArr,
	codeToText,
} from 'element-china-area-data'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
	components: { Treeselect },
	data() {
		var validatePhone = (rule, value, callback) => {
			if (!value.match(/^(0|86|17951)?1[3456789]\d{9}$/)) {
				callback(new Error('请输入正确的手机号'))
			} else {
				callback()
			}
		}
		return {
			// 遮罩层
			loading: true,
			btnLoading: false,
			regionData,
			pcaTextArr,
			selectedOptions: [],
			ruleForm: {
				pageNum: 1,
				pageSize: 10,
				configflag: '',
				total: 0,
			},
			list: [], //
			user: {
				open: false,
				title: '',
			},
			form: {
				id: null,
				loginname: '',
				username: '',
				telnum: '',
				code: '',
				sex: '',
				nation: '',
				hometown: '',
				birth: '',
				education: '',
				address: '',
				position: '',
				retire: 0,
				status: 1,
				picture: '',
				sysuserid: '',
				password: '',
				deptid: undefined,
				imageUrl: '',
			},
			rules: {
				loginname: [
					{
						required: true,
						message: '请输入用户名',
						trigger: 'blur',
					},
				],
				username: [
					{ required: true, message: '请输入姓名', trigger: 'blur' },
				],
				telnum: [
					{
						validator: validatePhone,
						required: true,
						message: '请输入正确的手机号码',
						trigger: 'blur',
					},
				],
				deptid: [
					{
						required: true,
						message: '请输入归属部门',
						trigger: 'blur',
					},
				],
			},
			// 部门树选项
			deptOptions: undefined,
		}
	},
	methods: {
		//切换分页
		handleCurrentChange(val) {
			this.loading = true
			this.ruleForm.pageNum = val
			this.getList()
		},
		//切换总条数
		handleSizeChange(val) {
			this.loading = true
			this.ruleForm.pageSize = val
			this.getList()
		},
		//选择地区
		changeArea(e) {
			this.form.hometown = e.join('/')
		},
		handleItem(type, item) {
			if (type == 1) {
				let {
					id,
					loginname,
					username,
					telnum,
					code,
					sex,
					nation,
					hometown,
					birth,
					education,
					address,
					position,
					retire,
					status,
					picture,
					sysuserid,
					password,
					deptid,
					imageUrl,
				} = item
				this.form = {
					id,
					loginname,
					username,
					telnum,
					code,
					sex,
					nation,
					hometown,
					birth,
					education,
					address,
					position,
					retire,
					status,
					picture,
					sysuserid,
					password,
					deptid,
					imageUrl,
				}
				this.selectedOptions = item.hometown.split('/')
				this.user.title = '编辑用户'
				this.user.open = true
			} else {
				this.$confirm('是否删除该用户?', '系统提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(() => {
						deleteUser({ id: item.id }).then((res) => {
							this.ruleForm.pageNum = 1
							this.loading = true
							this.$modal.msgSuccess(res.msg)
							this.getList()
						})
					})
					.catch(() => {})
			}
		},
		//上传图片
		handleChange(file) {
			let data = new FormData()
			data.append('file', file.raw)
			uploaduserpic(data).then((res) => {
				this.form.picture = res.msg
				this.form.imageUrl =
					process.env.VUE_APP_BASE_API + '/' + res.msg
				// this.$modal.msgSuccess("上传成功");
				this.$forceUpdate()
			})
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.btnLoading = true
					let api = this.form.id
						? editUser(this.form)
						: addUser(this.form)
					api.then((res) => {
						this.btnLoading = false
						this.user.open = false
						this.ruleForm.pageNum = 1
						this.$modal.msgSuccess(res.msg)
						this.getList()
					}).catch(() => {
						this.btnLoading = false
					})
				} else {
					return false
				}
			})
		},
		getList() {
			listUser(this.ruleForm).then((res) => {
				res.data.list.forEach((item) => {
					item.imageUrl =
						process.env.VUE_APP_BASE_API + '/' + item.picture
				})
				this.list = res.data.list
				this.ruleForm.total = res.data.total
				this.loading = false
			})
		},
		/** 查询部门下拉树结构 */
		getDeptTree() {
			deptTreeSelect().then((response) => {
				this.deptOptions = response.data
			})
		},
	},
	created() {
		this.getList()
		this.getDeptTree()
	},
}
</script>
<style lang="scss" scoped>
.user {
	margin: 24px 16px 0;
	background: #ffffff;
	padding: 24px;
}
::v-deep .avatar-uploader .el-upload {
	width: 136px;
	height: 136px;
	padding: 8px;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
	border-color: #ff4d4f;
}
::v-deep .avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 120px;
	height: 120px;
	line-height: 120px;
	text-align: center;
}
.avatar {
	width: 120px;
	height: 120px;
	display: block;
	border-radius: 6px;
	object-fit: cover;
}
::v-deep .form .el-form-item__content {
	width: 220px;
}
</style>
